import styled from 'styled-components';

export const SubTabContainer = styled.div`
  display: flex;
  justify-content: center;
`;

export const SubTab = styled.div`
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
`;

interface SubTabLiType {
  active: boolean,
}
export const SubTabLi = styled.li<SubTabLiType>`
  width: 92px;
  height: 32px;
  box-sizing: border-box;
  border: ${(props) => (props.active ? '1px solid #F05053' : '1px solid #B8B8B8')};
  background: ${(props) => (props.active ? '#F05053' : '#FFFFFF')};
  color: ${(props) => (props.active ? '#FFFFFF' : 'rgba(0,0,0,0.70)')};
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
`;

export const Main = styled.div`
  display: block;
`;

export default SubTab;
